<%--
  Created by IntelliJ IDEA.
  User: root
  Date: 12/24/21
  Time: 3:02 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr><td>用户名：</td><td><input type="text" id="tilesUserName" onblur="tilesname()" /></td><td><span id="userinfo"></span></td></tr>
        <tr><td>密码： </td><td><input type="password" id="password" onblur="pwd()"/></td><td><span id="pwdinfo"></span></td></tr>
        <tr><td>电子邮件：</td><td><input type="email" id="email" onblur="email()"/></td><td><span id="emailinfo"></span></td></tr>
        <tr><td>手机号码：</td><td><input type="text"  id="phone"  /><button onclick="a1()">发送验证码</button><span id="phoneInfo"></span></td></tr>
        <tr><td>手机验证码：</td><td><input type="text" id="smsCode"/></td></tr>
        <tr><td></td><td><button onclick="register()">注册</button></td></tr>
    </table>
</div>

<script >
    var name;
    var password1;
    var userEmail;
    var phoneNumber;
    var smsCode;
    function tilesname(){
        name = $("#tilesUserName").val();
        const userinfo = $("#userinfo");
        if(name!=""){
            $.ajax({
                url: "${pageContext.request.contextPath}/ajax/a2",
                type: "post",
                data:{"tilesUserName":name},
                success:function (data) {
                    const  msg=data.msg;
                    const code = data.code;
                    console.log(msg);
                    if(code==0){
                        $("#userinfo").css("color","green")
                    }else {
                        $("#userinfo").css("color", "red")
                    }
                    $("#userinfo").html(msg);
                }
            });
        }else {
            userinfo.css("color", "red");
            userinfo.html("用户名不能为空");
        }
    }
    function pwd(){
        password1 = $("#password").val();
        const pwdinfo = $("#pwdinfo");
        if(password1!=""){
        }else {
            pwdinfo.css("color", "red");
            pwdinfo.html("密码不能为空");
        }
    }
    function email(){
         userEmail = $("#email").val();
        if ($("#email").val() !=""){
            $.ajax({
                url: "${pageContext.request.contextPath}/ajax/a2",
                type: "post",
                data: {"email": $("#email").val()}

            });
        }else {
            $("#emailinfo").css("color", "red");
            $("#emailinfo").html("邮箱不能为空");
        }
    }
    function a1(){
         phoneNumber = $("#phone").val();
        if ($("#phone").val()!=""){
            $("#phoneInfo").css("color", "green");
            $("#phoneInfo").html("");

            $.ajax({
                url: "${pageContext.request.contextPath}/ajax/a1",
                type: "post",
                data: {"phone": $("#phone").val()},
                success: function (data) {
                }
            });

        }else {
            $("#phoneInfo").css("color", "red");
            $("#phoneInfo").html("电话号码不正确");
        }
    }

    function register() {
       smsCode = $("#smsCode").val();
        console.log(name);
        console.log(password1);
        console.log(userEmail);
        console.log(phoneNumber);
        console.log(smsCode);
        $.ajax({
            url: "${pageContext.request.contextPath}/ajax/a2",
            type: "post",
            data:{"tilesUserName":name,"password":password1,"email":userEmail,"phone":phoneNumber,"smsCode":smsCode},
            success: function (data) {
                console.log(data);
            }

        });

    }

</script>




</body>
</html>
